<template>
	<view>
		<page-head></page-head>
		<scroll-view scroll-y="true" :style="[{height:'calc( 100vh - ' + (statusBarHeight + 100) + 'px)' }]"
		 scroll-with-animation="true" :scroll-into-view="toView">
			<view class="container">
				<!-- 头部 -->
				<view class="home_top">
					<view class="search">
						<view class="search_input box">
							<view class="city box box-align-center">
								<image src="/static/images/Group11@3x.png"></image>
								<view class="txt" v-if="city">{{city}}</view>
								<view class="txt" v-else @tap="getUserLocation">无定位</view>
							</view>
							<navigator :url="'/pages/coupon/search?city='+city" class="nav search-nav box box-align-center" @tap='handleSubmit'
							 data-name="点击搜索" data-code="search">
								<image src="/static/images/Group12@3x.png" class="search_img"></image>
								<view class="placeholder">搜索品牌优惠券</view>
							</navigator>
						</view>
						<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" class="banner"
						 circular="true" indicator-color="#FFFFFF" indicator-active-color="#736F6F">
							<block v-for="(item, index) of ad_img" :key="index">
								<swiper-item class="banner-item" @tap="handlebanner(item.title)">
									<button open-type='share' v-if="item.type === 'share'">
										<image :src="item.image_url" class="slide-image" mode="aspectFill" />
									</button>
									<view class="" v-if="item.type === 'reveal'">
										<image :src="item.image_url" class="slide-image" mode="aspectFill" />
									</view>
									<navigator :url="item.myurl" v-else>
										<image :src="item.image_url" class="slide-image" mode="aspectFill" />
									</navigator>
								</swiper-item>
							</block>
						</swiper>
					</view>
				</view>
				<!-- 公告 -->
				<view class="noticelist box box-align-center">
					<view class="noticetit">
						<image src="/static/images/Group10@3x.png"></image>
					</view>
					<swiper :autoplay="autoplay" :interval="noticeinterval" :duration="noticeduration" :vertical="noticevertical"
					 class="noticeswiper">
						<swiper-item v-for="(item, index) of noticelist" :key="index">
							<view class="txt">{{item.content}}</view>
						</swiper-item>
					</swiper>
				</view>
				<!-- 过滤分类 -->
				<view class="Preferential">
					<view class="brandlist box box-align-center">
						<scroll-view class="scroll_ul" scroll-x>
							<view :class="['scroll_li', barndindex === 'choice' ? 'on':'']" @tap="handlemore">
								<view class="box box-pack-center box-align-center mycon">
									<view class="name">精选</view>
								</view>
							</view>
							<block v-for="(item, index) of categorylist" :key="index">
								<view :class="['scroll_li', barndindex === index ? 'on': '']" @tap="handlecode(index, item.code_num, item.code_name)">
									<view class="box box-pack-center box-align-center mycon">
										<view class="name">{{item.code_name}}</view>
									</view>
								</view>
							</block>
						</scroll-view>
					</view>
					<view class="comp_list" v-if="columnToggle">
						<template v-if="barndindex !== 'choice'">
							<view class="comp_item" v-for="coupon_item of column" :key="coupon_item.comp_id" :id="coupon_item.comp_code">
								<view class="comp_header" :style="[{ background: 'url('+coupon_item.comp_banner+') no-repeat', 'background-size': '100% 100%' }]"
								 @tap='handleComp(coupon_item.comp_id, coupon_item.comp_name, coupon_item.coupon_len)'>
									<view class="order box box-align-center">
										<view class="logo box box-align-center box-pack-center">
											<view class="logo_img" :style="[{ background: 'url('+coupon_item.image_url+') no-repeat', 'background-size': '100% 100%' }]"></view>
										</view>
										<view class="order_con flex">
											<view class="order_tit box">
												<view class="tit">{{coupon_item.comp_name}}</view>
												<view :class="['arrow', develop == coupon_item.comp_id ? 'active':'']"></view>
											</view>
											<view class="order_num">{{coupon_item.coupon_len}}张</view>
										</view>
									</view>
								</view>
								<view class="act_content" v-if="develop === coupon_item.comp_id">
									<coupon-list :coupon="coupon" :compId="coupon_item.comp_id"></coupon-list>
								</view>
							</view>
						</template>
						<view class="act_content" v-else>
							<coupon-list :coupon="coupon"></coupon-list>
						</view>
					</view>
					<view class="coupon_undata" wx:else>
						<image src="/static/images/coupon_undata.png"></image>
						<view class="tt">暂时没有相关的券哦~</view>
					</view>
				</view>
				<!-- <get-phone :phoneToggle="phoneToggle"></get-phone> -->
			</view>
		</scroll-view>
		<page-bottom :page_path="page_path"></page-bottom>
	</view>
</template>

<script>
	import getlocat from "../../common/getlocat"
	import home from "../../model/home"

	import getPhone from "../../components/iframe/getPhone"
	import couponList from "../../components/coupon/couponlist"
	const app = getApp()
	export default {
		data() {
			return {
				statusBarHeight: uni.getStorageSync('statusBarHeight'),
				city: uni.getStorageSync('usercity'),
				page_path: "/pages/home/index",
				// 验证手机号码弹窗
				phoneToggle: false,
				// 轮播图设置
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 1000,
				// 公告轮播速度设置
				noticeinterval: 4000,
				noticeduration: 1000,
				noticevertical: true,
				// 公告
				noticelist: [],
				// 轮播图
				ad_img: [],
				// 分类列表
				categorylist: [],
				// 当前分类index值
				barndindex: 'choice',
				// 选中分类key名
				category: '',
				// 优惠券，品牌，banner信息对象
				coupon_data: {},
				// 优惠券数据
				coupon: [],
				// 品牌列表
				column: [],
				// 需展示的品牌index
				develop: '',
				// 品牌栏的索引值
				toView: 'a',
				// 该分类是否有优惠券
				columnToggle: true
			};
		},
		components: {
			getPhone,
			couponList
		},
		onLoad() {
			console.log(home);
			console.log(app.globalData.STATIC_URL)

			// console.log(HomeIndex.parse({}).plan)
		},
		onShow() {
			this.getUserLocation()
			// 获取首页数据
			this.getData()
		},
		onShareAppMessage(res) {
			var that = this
			wx.showShareMenu({
				withShareTicket: true
			})
			return {
				title: "扫Ｖ券，立享优惠！",
				path: '/pages/home/index' + '?from_scene=' + wx.getStorageSync('scene') + '&from_openid=' + wx.getStorageSync(
					'openid'),
				imageUrl: 'http://wq.senwellzy.cn/Public/Images/vquan/newshare_img.png?v=' + app.VERSION
			}
		},
		methods: {
			handlecode(index, code_num, code_name) {
				this.barndindex = index
				this.category = code_num
				this.getIndexData()
			},
			handlemore() {
				if (this.barndindex !== 'choice') {
					this.barndindex = 'choice'
					this.category = ''
					this.getIndexData()
				}
			},
			// V券折叠功能
			handleComp: function(compid, comp_name) {
				if (this.develop !== compid) {
					this.develop = compid
					this.toView = compid == '' ? 'a' : 'a' + compid
					// wx.aldstat.sendEvent('点击展开品牌', {
					// 	'品牌名': comp_name
					// })
				} else {
					this.develop = -1
				}
			},
			getUserLocation() {
				let _this = this
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('usercity')) return false
				wx.getSetting({
					success(res) {
						if (!res.authSetting["scope.userLocation"]) {
							getlocat.getAuthorizeInfo().then(() => {
								getlocat.getLocationInfo().then(res => {
									let city = res.result.ad_info.city
									_this.city = city
								})
							})
						} else {
							getlocat.getLocationInfo().then(res => {
								let city = res.result.ad_info.city
								_this.city = city
							})
						}
					}
				})
				// #endif
			},
			// 获取首页数据
			getData() {
				if (this.noticelist.length == 0) {
					this.$api.wxApi.getSubtitle().then(res => {
						this.noticelist = home.Subtitle.parse(res.data)
					})
				}
				if (this.categorylist.length == 0) {
					this.$api.wxApi.getActCategory().then(res => {
						this.categorylist = home.ActCategory.parse(res.data)
					})
				}
				this.getIndexData()
			},
			getIndexData() {
				let _zdy = {}
				_zdy.choice = this.barndindex === 'choice' ? 'Y' : 'N'
				_zdy.category = this.category
				this.category = this.category != '' ? this.category : 'choice'
				this.getlist(_zdy).then(res => {
					this.ad_img = res.plan.ad_img
					this.coupon = res.coupon
					this.column = res.comp
					this.columnToggle = this.coupon.length > 0 ? true : false
				})
			},
			getlist(zdy) {
				return new Promise(resolve => {
					if (this.category && this.category in this.coupon_data) {
						resolve(this.coupon_data[this.category])
					} else {
						this.$api.wxApi.getHomeIndex(zdy).then(res => {
							this.coupon_data[this.category] = home.HomeIndex.parse(res.data)
							resolve(this.coupon_data[this.category])
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	// @import url("../../static/styles/couponlist.css");

	.container {
		padding-bottom: 10rpx;
		background: #f1f1f1;
	}

	.home_top {
		width: 100%;
		height: 252rpx;
		background: -webkit-linear-gradient(top, #FC8645, #F9573F);
		background: linear-gradient(top, #FC8645, #F9573F);
		position: relative;
	}

	/* 公告 */
	.noticelist {
		height: 68rpx;
		padding: 74rpx 20rpx 0;
		font-size: 28rpx;
		background: #fff;

		.noticetit image {
			width: 26rpx;
			height: 22rpx;
		}

		.noticeswiper {
			flex: 1;
			height: 68rpx;
			margin-left: 10rpx;

			.txt {
				line-height: 68rpx;
				color: #EC2921;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}

	// 搜索框
	.search {
		padding: 14rpx 3% 20rpx;
		justify-content: center;
		align-items: center;

		.city {
			font-size: 26rpx;
			line-height: 1.4;
			color: #fff;

			image {
				width: 22rpx;
				height: 26rpx;
			}

			.txt {
				color: #FFFFFF;
				font-size: 28rpx;
				margin-left: 10rpx;
				white-space: nowrap;
			}
		}

		.search_input {
			width: 100%;
			height: 56rpx;
			position: relative;

			.nav {
				flex: 1;
				height: 56rpx;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 33rpx;
				margin-left: 20rpx;
				font-size: 28rpx;
				position: relative;

				.placeholder {
					flex: 1;
					height: 40rpx;
					font-size: 28rpx;
					color: rgba(255, 255, 255, 0.37);
					line-height: 40rpx;
					margin-left: 8rpx;
				}
			}

			.search_img {
				margin-left: 24rpx;
				width: 24rpx;
				height: 24rpx;
			}

			.sharedou {
				margin-left: 30rpx;

				image {
					width: 36rpx;
					height: 34rpx;
					display: block;
				}

				.txt {
					white-space: nowrap;
					width: 104rpx;
					height: 36rpx;
					font-size: 26rpx;
					font-family: PingFang-SC-Regular;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					line-height: 36rpx;
					margin-left: 10rpx;
				}
			}
		}
	}

	// 轮播图
	.banner {
		position: absolute;
		width: 100%;
		height: 216rpx;
		bottom: -58rpx;
		left: 0;

		image {
			width: 100%;
			height: 216rpx;
			text-align: center;
			overflow: hidden;
			border-radius: 24rpx;
			transform: scale(0.94);
			// /* box-shadow:0 26px 40px -24px #E1E1E1; */
			// /* box-shadow:0 8rpx 20rpx -18rpx #E1E1E1; */
			box-shadow: 0 16rpx 26rpx -16rpx #E1E1E1;
		}

		button {
			position: relative;
			display: block;
			font-size: 28rpx;
			text-align: left;
			text-decoration: none;
			-webkit-tap-highlight-color: transparent;
			color: #000;
			background: none;
			padding: 0rpx;
			margin: 0rpx;
			border: none;
			overflow: hidden;
			border-radius: 0rpx;

			&::after {
				content: "";
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				-webkit-transform: scale(0.5);
				transform: scale(0.5);
				-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
				box-sizing: border-box;
				border-radius: 0px;
				border: none;
				border-color: #fff;
			}
		}
	}


	.brandlist {
		background: #fff;

		.scroll_ul {
			white-space: nowrap;

			.scroll_li {
				display: inline-block;
				position: relative;
				height: 90rpx;
				line-height: 90rpx;
				padding: 0 30rpx;

				.mycon {
					flex-flow: column nowrap;
				}

				.name {
					color: #999;
					font-size: 28rpx;
					line-height: 40rpx;
					padding-top: 20rpx;
				}

				&.on {
					position: relative;
					height: 84rpx;

					.name {
						position: relative;
						color: #1c1c1c;
						font-size: 30rpx;
						font-weight: 600;
						line-height: 40rpx;
					}

					&:after {
						content: ' ';
						position: absolute;
						top: 80%;
						left: 50%;
						margin-left: -30rpx;
						height: 8rpx;
						width: 60rpx;
						background: #ffdd54;
						border-radius: 8rpx;
						overflow: hidden;
					}
				}
			}
		}

		.more {
			white-space: nowrap;
			text-align: center;
			font-size: 36rpx;
			color: #808080;

			&.on {
				color: #d2353c;
			}
		}
	}
	
	// 品牌banner位
	.comp_list {
	  margin-top: 10rpx;
	  padding: 0 30rpx;
	}
	
	.comp_list .comp_item {
	  position: relative;
	}
	
	.comp_list .comp_item .comp_header {
	  width: 100%;
	  border-radius: 16rpx 16rpx 0 0;
	  overflow: hidden;
	  margin-top: 40rpx;
	}
	
	.comp_list .comp_item .order {
	  height: 180rpx;
	  padding: 0 26rpx;
	  background: rgba(0, 0, 0, 0.5);
	}
	
	.comp_list .comp_item .order .logo {
	  width: 94rpx;
	  height: 94rpx;
	  border: 4rpx solid rgba(255, 255, 255, 0.5);
	  border-radius: 50%;
	  overflow: hidden;
	}
	
	
	.comp_list .comp_item .order .logo .logo_img {
	  width: 94rpx;
	  height: 94rpx;
	  overflow: hidden;
	  
	}
	
	.comp_list .comp_item .order .order_con {
	  margin-left: 20rpx;
	}
	
	.comp_list .comp_item .order .order_con .order_tit {
	}
	
	.comp_list .comp_item .order .order_con .order_tit .tit {
	  font-size: 36rpx;
	  color: #fff;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	  flex: 1;
	}
	
	.comp_list .comp_item .order .order_con .order_num {
	  font-size: 30rpx;
	  color: #fff;
	}
	
	.comp_list .comp_item .order .arrow {
	  padding-right: 26rpx;
	  position: relative;
	}
	
	.comp_list .comp_item .order .arrow:after {
	  content: " ";
	  display: inline-block;
	  height: 18rpx;
	  width: 18rpx;
	  border-width: 4rpx 4rpx 0 0;
	  border-color: #fff;
	  border-style: solid;
	  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	  position: absolute;
	  top: 50%;
	  margin-top: -8rpx;
	  right: 20rpx;
	  transition: all 0.5s;
	}
	
	.comp_list .comp_item .order .arrow.active:after {
	  transition: all 0.5s;
	  transform: rotate(135deg);
	}
	
	
	// 无优惠券时
	.coupon_undata {
	  margin: 150rpx auto 0;
	  display: flex;
	  flex-flow: column nowrap;
	  align-items: center;
	  justify-content: center;
		image {
		  width: 164rpx;
		  height: 105rpx;
		}
		.tt {
		  font-size: 28rpx;
		  color: rgb(0, 0, 0);
		  margin-top: 20rpx;
		}
	}
	
	.act_content {
	  width: 100%;
	  display: block;
	  background: #f1f1f1;
	  padding-bottom: 20rpx;
	}
</style>
